<template>
	<view class="content">
		<view class="tag-nav-container">
			<scroll-view class="tag-nav" scroll-x="true">
				<view v-for="item in tagList" class="tag" :class="item.active && 'active'" @click="switchTag(item)">
					{{item.name}}
				</view>
				<view>
					<view class="underline"></view>
				</view>
			</scroll-view>
		</view>

		<uni-card @click="onClick(item.id)" v-for="(item,index) in trendList">
			<view class="userInfo">
				<view class="user-head">
					<image :src="item.head"></image>
				</view>
				<text style="font-weight: bold; margin-left: 10px;">{{item.nickName}}</text>
				<image src="../../static/image/定位.png"></image>
				<text>{{item.publishPosition}}</text>
			</view>

			<view class="trend-content">
				{{item.sketch}}
			</view>

			<view class="trend-image">
				<image :mode="imgMode" @click="clickImage(image)" v-for="image in item.images" :src="image"></image>
			</view>

			<view slot="actions" class="card-actions">
				<!-- 0代表评论 1代表点赞 -->
				<view class="card-actions-item" @click="actionsClick('0')">
					<uni-icons type="chatbubble" size="25" color="#cdcdcd"></uni-icons>
					<view class="card-actions-item-text"
						style="color: #cdcdcd;margin-left: 3px; height: 25px;line-height: 25px;">{{item.commentCount}}
					</view>
				</view>
				<view class="card-actions-item" @click="actionsClick('1',item.isLike,item.id,index)">
					<uni-icons :type="heart(item.isLike || false)" :color="likeIconColor(item.isLike || false)" size="25"></uni-icons>
					<view class="card-actions-item-text"
						style="color: #cdcdcd;margin-left: 3px; height: 25px;line-height: 25px;">{{item.likeCount}}
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		getTrends,
		likeTrend,
		getAllTags
	} from '../../api/trend.js'
	export default {
		data() {
			return {
				tagList: [{
					id: -1,
					name: '全部',
					active: true
				}, {
					id: 0,
					name: '关注',
					active: false
				}],
				page: {
					pageNum: 1
				},
				clickedCard: true,
				imgMode: 'aspectFill',
				trendList: [],
				trendLike: {
					trendId: 0,
					flag: true
				}
			}
		},
		onShow() {
			// 分类导航栏js
			this.$nextTick(() => {
				const tags = document.querySelectorAll('.tag');
				const underline = document.querySelector('.underline');
				const underlineWidth = underline.clientWidth;
				this.tagList.forEach((tag, i) => {
					if (tag.active) {
						underline.style =
							`margin-left: ${tags[i].offsetLeft + tags[i].clientWidth / 2 - underlineWidth / 2}px`;
					}
				});
			});
			// 开启下拉刷新
			setTimeout(() => {}, 1000);
			uni.startPullDownRefresh();
		},
		// 刷新时会执行
		onPullDownRefresh() {
			// 获取标签
			getAllTags().then(res => {
				let tags = res.data.map(t => { t.active = false; return t });
				this.tagList = [...this.tagList.slice(0,2), ...tags]
			})

			// 获取动态
			getTrends(this.page).then(res => {
				if (res.code == 200) {
					this.trendList = res.data.rows
				}
			})
			// 1s后停止刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		},

		methods: {
			onClick(trendId) {
				// 阻止冒泡
				if (!this.clickedCard) {
					this.clickedCard = true;
					return;
				}
				uni.navigateTo({
					url:"/pages/trend_detail/index?trendId=" + trendId,
				})
			},
			switchTag(item) {
				if (item.active) return;
				// 移动线
				const tags = [...document.querySelectorAll('.tag')];
				const underline = document.querySelector('.underline');
				const underlineWidth = underline.getBoundingClientRect().width;
				let originalOffsetLeft, currentOffsetLeft;
				this.tagList.forEach((tag, i) => {
					tag.active && (originalOffsetLeft = tags[i].offsetLeft + tags[i].clientWidth / 2) && (tag
						.active = false);
					tag === item && (currentOffsetLeft = tags[i].offsetLeft + tags[i].clientWidth / 2) && (tag
						.active = true);
				});
				underline.style =
					`margin-left: ${currentOffsetLeft - underlineWidth / 2}px;transition:margin-left ${Math.sqrt(Math.abs(currentOffsetLeft - originalOffsetLeft) / 40) * .1}s ease-out`;

				// 滚动至中间
				const scrollView = document.querySelector('.uni-scroll-view .uni-scroll-view');
				const currentState = underline.offsetLeft - (scrollView.clientWidth - underline.clientWidth) / 2;
				const targetState = currentOffsetLeft - underlineWidth / 2 - (scrollView.clientWidth - underline
					.clientWidth) / 2;
				const min = 0,
					max = scrollView.scrollWidth - window.innerWidth;
				const offset = Math.max(min, Math.min(max, currentState)) -
					Math.max(min, Math.min(max, targetState));
				const duration = Math.sqrt(Math.abs(currentOffsetLeft - originalOffsetLeft) / 40) * 100;

				const perTickMovement = offset / duration;
				const tick = 10;
				clearInterval(scrollView.interval);
				scrollView.interval = setInterval(() => {
					const old = scrollView.scrollLeft;
					scrollView.scrollLeft -= perTickMovement * tick;
					if (Math.abs(scrollView.scrollLeft - targetState) <= Math.abs(perTickMovement * tick) ||
						scrollView.scrollLeft === old) {
						scrollView.scrollLeft = targetState;
						clearInterval(scrollView.interval);
					}
				}, tick);
			},
			clickImage(image) {
				this.clickedCard = false;
				uni.previewImage({
					urls: [image],
					loop: false
				});
			},
			likeIconColor(flag) {
				// true表示已点赞，false表示未点赞
				if (flag) {
					return "#fabdcc";
				} else {
					return "#cdcdcd";
				}
			},
			heart(flag) {
				// true表示已点赞，false表示未点赞
				if (flag) {
					return "heart-filled";
				} else {
					return "heart";
				}
			},
			actionsClick(text, flag, trendId,index) {
				this.clickedCard = false;
				switch (text) {
					case "0":
						uni.showToast({
							title: "评论",
							icon: 'none'
						});
						break;
					case "1":
						this.trendLike.trendId = trendId;
						this.trendLike.flag = flag;
						likeTrend(this.trendLike).then(res => {
							if(res.code == 200){
								uni.showToast({
									title: "操作成功",
									icon: 'none'
								});
							}
						})
						this.trendList[index].isLike = !flag;
						if(flag){
							this.trendList[index].likeCount = this.trendList[index].likeCount - 1;
						}else{
							this.trendList[index].likeCount = this.trendList[index].likeCount + 1;
						}
						break;
					default:
						console.log("error");
				}
			}
		}
	}
</script>

<style>
	/* 取消scroll-view的滚动条 */
	.tag-nav-container {
		background-color: #fff;
		overflow: hidden;
		height: 35px;
	}

	.tag-nav {
		height: 50px;
	}

	.underline {
		background-color: #ffd524;
		height: 4px;
		width: 15px;
		border-radius: 2px;
		margin-top: 2px;
	}

	.tag-nav {
		display: flex;
		width: 100%;
		white-space: nowrap
	}

	.tag {
		display: inline-block;
		font-size: 16px;
		font-weight: 100;
		/* font-family: cf; */
		margin-left: 20px;
	}

	.tag:last-child {
		margin-right: 20px;
	}

	.tag.active {
		font-size: 20px;
		font-weight: 300;
	}

	.userInfo {
		width: 100%;
		height: 50px;
		display: flex;
	}

	.userInfo>image {
		width: 20px;
		height: 20px;
		margin-left: 20px;
		margin-top: 4px;
	}

	.userInfo>text {
		font-size: 5px;
		line-height: 30px;
	}

	.user-head {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-head>image {
		width: 40px;
		height: 40px;
	}

	.card-actions {
		display: flex;
		padding-left: calc(100% - 110px);
	}

	.card-actions-item {
		margin-left: 15px;
		margin-bottom: 10px;
		display: flex;
	}

	.trend-content {
		width: 100%;
		font-size: 15px;
	}

	.trend-image {
		width: 100%;
		display: flex;
	}

	@media only screen and (min-width: 375px) and (max-width: 500px) {
		.trend-image>image {
			border-radius: 10px;
			margin: 2px;
			width: 33%;
			height: 100px;
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 1200px) {
		.trend-image>image {
			border-radius: 10px;
			margin: 2px;
			width: 33%;
			height: 200px;
		}
	}
</style>